<template>
  <div>
    <el-pagination
      class="tr"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script lang="ts">
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import { State } from "vuex-class"
  //为空也必须声明否则报错
  @Component({
    components:{}
  })
  export default class fmlPagination extends Vue{
    pageSizes:any=[15, 20, 50, 100, 200];//每页可选条数

    @State page:number;//当前页
    @State pageSize:number;//当前页条数

    @Prop()
    total:number;//数据总数

    //下拉变换
    handleSizeChange(size){
      if(this.total/15<=1)return
      this.$store.commit('setPageSize',size)
    }
    // 当前页变化
    handleCurrentChange(currentPage){
      this.$store.commit('setPage',currentPage)
    }

    mounted(){
    }
  }
</script>
